<%@page import="com.surelution.projects.crm.Market"%>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="layout" content="main"/>
<g:javascript library="jquery"/>
<resource:dateChooser />
<link rel="stylesheet" href="${resource(dir:'css',file:'defaultTheme.css')}" />
<script type="text/javascript" src="${resource(dir:'js/jquery',file:'jquery.fixedheadertable.min.js')}"></script>
<g:set var="entityName" value="${message(code: 'market.label', default: 'market')}" />
<script type="text/javascript" src="${resource(dir:'js/jquery',file:'jquery.printElement.min.js')}"></script>
<script type="text/javascript" src="${resource(dir:'js/datechooser',file:'datechooser.js')}"></script>
<title><g:message code="default.marketSaleReport.label" /></title>
	<script type="text/javascript">
		$(document).ready(function() {
		   $("#simplePrint").click(function() {
		       printElem({leaveOpen: true, printMode: 'popup', overrideElementCSS: ["${resource(dir:'plugins/richui-0.8/css',file:'calendarmonthview.css')}","${resource(dir:'css',file:'main.css')}"]});
		   });
		   $('#myTable01').fixedHeaderTable({ footer: false, cloneHeadToFoot: false, autoShow: true });
		});
		function printElem(options){
		    $('#monthReport').printElement(options);
		};

	</script>
</head>

<body>
  <div class="body">
          <div class="nav">
            <span class="menuButton"><a class="home" href="${createLink(uri: '/')}"><g:message code="default.home.label"/></a></span>
          </div>
          <div>
        	<g:form action="marketSaleReport">
				<p style="font-size:16px;color:#000;margin:10px 0;"><g:message code="default.marketSaleReport.label" /></p>
        		选择日期：<g:datePicker name="month" precision="month" value="${month }"/>
			    <span class="menuButton" style="margin-right:5px;"><g:actionSubmit value="${message(code: 'default.button.search.label', default: 'search')}" action="marketSaleReport"/></span>
    			<span class="menuButton"><g:actionSubmit value="${message(code: 'default.button.export.label', default: 'Export')}" action="marketSaleReportExport"/></span>
			    <input type="button" value="打印报表" id="simplePrint" /><br>
       			<sec:ifAnyGranted roles="ROLE_ADMIN">
	    			选择片区：
					<g:each in="${com.surelution.projects.crm.StationArea.list()}" var="area">
		    			<g:checkBox id="stationArea.id_${area.id }" name="stationArea" value="${area.id }" checked="${stationArea!=[]?stationArea.contains(area.id):true}"/><label for="stationArea.id_${area.id }">${area.areaName}</label>&nbsp;
	    			</g:each>
     			</sec:ifAnyGranted>
			</g:form>
			<g:if test="${flash.message}">
            	<div class="message">${flash.message}</div>
            </g:if>
        </div>
        <%
			def tmonthgas=0,tmonthfuel=0,tmonthAll=0,tyeargas=0,tyearfuel=0,tyearAll=0
		 %>
        <div  style="height:630px;">
	    	<label style="font-size:16px;color:#0f3072;">报表日期:  ${startDay.format("yyyy年MM月dd日")}到${endDay.format("yyyy年MM月dd日")}</label>
       		<table id="myTable01" >
       			<thead>
       			<tr>
        			<td ></td>
        			<td ></td>
        			<td ></td>
        			<td ></td>
        			<td style="text-align: center;vertical-align: middle;background:#75746a;color:#fff;" colspan="3">月度</td>
        			<td style="text-align: center;vertical-align: middle;background:#75746a;color:#fff;" colspan="3">年度</td>
        		</tr>
        		<tr>
        			<td style="text-align: center;vertical-align: middle;background:#75746a;color:#fff;width:50px;">片区</td>
        			<td style="text-align: center;vertical-align: middle;background:#75746a;color:#fff;width:60px;">加油站名</td>
        			<td style="text-align: center;vertical-align: middle;background:#75746a;color:#fff;width:250px;">客户名称</td>
        			<td style="text-align: center;vertical-align: middle;background:#75746a;color:#fff;width:80px;">优惠额度</td>
        			<td style="text-align: center;vertical-align: middle;background:#75746a;color:#fff;width:80px;">柴油量(吨)</td>
          			<td style="text-align: center;vertical-align: middle;background:#75746a;color:#fff;width:80px;">汽油量(吨)</td>
          			<td style="text-align: center;vertical-align: middle;background:#75746a;color:#fff;width:60px;">合计(吨)</td>
          			<td style="text-align: center;vertical-align: middle;background:#75746a;color:#fff;width:80px;">柴油量(吨)</td>
          			<td style="text-align: center;vertical-align: middle;background:#75746a;color:#fff;width:80px;">汽油量(吨)</td>
          			<td style="text-align: center;vertical-align: middle;background:#75746a;color:#fff;width:60px;">合计(吨)</td>
          			<td style="text-align: center;vertical-align: middle;background:#75746a;color:#fff;width:70px;">协议销量</td>
          			<td style="text-align: center;vertical-align: middle;background:#75746a;color:#fff;width:80px;">兑现率(%)</td>
          			<td style="text-align: center;vertical-align: middle;background:#75746a;color:#fff;width:40px;">环比</td>
    			</tr>
    			<tr class="even">
   					<td> 合计</td>
   					<td>0</td>
   					<td>0</td>
   					<td>0</td>
   					<td><div id="tmonthgas"></div></td>
   					<td><div id="tmonthfuel"></div></td>
   					<td><div id="tmonthAll"></div></td>
   					<td><div id="tyeargas"></div></td>
   					<td><div id="tyearfuel"></div></td>
   					<td><div id="tyearAll"></div></td>
   					<td>0</td>
   					<td>0</td>
   					<td>0</td>
   				</tr>
   				</thead>
   				<tbody>
   				<g:each in="${result}" var="r" status="i">
   				<%
					tmonthgas += r.get("monthgas")
				   	tmonthfuel += r.get("monthfuel")
				   	tmonthAll += r.get("monthAll")
				   	tyeargas += r.get("yeargas")
				   	tyearfuel += r.get("yearfuel")
				   	tyearAll += r.get("yearAll")
				 %>
				<tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
   					<td style="text-align:center;"> ${r.get("area")}</td>
   					<td> ${r.get("stationName")}</td>
   					<% def marketId = r.get("market").id %>
   					<td style="text-align:center;"> <g:link action="show" params="${['id':marketId] }">${r.get("marketName")}</g:link></td>
   					<td style="text-align:center;">${r.get("market").discountNum}</td>
   					<td style="text-align:center;">${r.get("monthgas")}</td>
   					<td style="text-align:center;">${r.get("monthfuel")}</td>
   					<td style="text-align:center;">${r.get("monthAll")}</td>
   					<td style="text-align:center;">${r.get("yeargas")}</td>
   					<td style="text-align:center;">${r.get("yearfuel")}</td>
   					<td style="text-align:center;">${r.get("yearAll")}</td>
   					<td style="text-align:center;">${r.get("contractAmount")}</td>
   					<td style="text-align:center;">${r.get("monthFinish")}</td>
   					<td style="text-align:center;">${r.get("compare")}</td>
   				</tr>
   				</g:each>
   				</tbody>
         	</table>
        </div>
		<script type="text/javascript">
			document.getElementById("tmonthgas").innerHTML = '${(formatNumber(number:tmonthgas,maxFractionDigits:1)) }';
			document.getElementById("tmonthfuel").innerHTML = '${(formatNumber(number:tmonthfuel,maxFractionDigits:1)) }';
			document.getElementById("tmonthAll").innerHTML = '${(formatNumber(number:tmonthAll,maxFractionDigits:1)) }';
			document.getElementById("tyeargas").innerHTML = '${(formatNumber(number:tyeargas,maxFractionDigits:1)) }';
			document.getElementById("tyearfuel").innerHTML = '${(formatNumber(number:tyearfuel,maxFractionDigits:1)) }';
			document.getElementById("tyearAll").innerHTML = '${(formatNumber(number:tyearAll,maxFractionDigits:1)) }';
        </script>
  </div>
</body>
</html>